<template>
    <div>
        <div class="containerful">
            <div class="public-header">
                <div class="public-logo">
                    <a href="">
                        <img src="@/assets/img/logo2.png" alt="">
                    </a>
                </div>
                <div class="public-nav ">
                    <div class="nav-title drowdown" :class="{active:isActive(item.id)}" v-for="(item,index) in navList" :key="index" ref="drowdown" @mouseenter="showItem(index)" @mouseleave="hideItem(index)">
                    <p @click.stop="canjump1(item)">{{item.name}}</p>
                    <div >
                        <ul v-if="item.subNavbars.length>0">
                            <li v-for="(navItem,index2) in item.subNavbars" :key="index2"><a  @click.stop="canjump(navItem)">{{navItem.name}}</a></li>
                        </ul>
                    </div>
                </div>  
                </div>
 
            </div>
        </div>  
    </div>
  
</template>

<script>
import indexApi from '@/api/index/nav'
    export default {
        name:'nav2',
        data(){
            return {
                navList: null
            }
        },
        props:['pid'],
        created(){
           this.getNav();
        },
        methods:{
            getNav(){
                indexApi.getNav().then(response=>{
                    this.navList = response
                })
            },
            isActive(id){
                if(id==this.pid){
                    return true
                }
            },
            showItem(index){
                this.$refs.drowdown[index].getElementsByTagName('div')[0].style.display="block"
            },
            hideItem(index){
                this.$refs.drowdown[index].getElementsByTagName('div')[0].style.display="none"
            },
            canjump1(item){ //点击根导航
               if(item.path==='/'){
                    this.jump(item.path,item.url)   
                }
                if(item.path&&item.url){//二级
                    this.jump(item.path,item.url,item.id)  
                }else if(item.subNavbars.length>0&&item.subNavbars[0].path&&item.subNavbars[0].url){//二级    
                    this.jump(item.subNavbars[0].path,item.subNavbars[0].url,item.id,item.subNavbars[0].id)
                }else if(item.subNavbars.length>0&&item.subNavbars[0].subNavbars.length>0&&item.subNavbars[0].subNavbars[0].path&&item.subNavbars[0].subNavbars[0].url){ //三级
                    this.jump(item.subNavbars[0].subNavbars[0].path,item.subNavbars[0].subNavbars[0].url,item.id,item.subNavbars[0].subNavbars[0].id)
                }
            },
            canjump(item){ //点击子导航 判断是否可以跳转
                if(item.path&&item.url){
                    this.jump(item.path,item.url,item.pid,item.id)  
                }else if(item.subNavbars.length>0&&item.subNavbars[0].path&&item.subNavbars[0].url){       
                    this.jump(item.subNavbars[0].path,item.subNavbars[0].url,item.pid,item.id,item.subNavbars[0].id)
                }else if(item.subNavbars.length>0&&item.subNavbars[0].subNavbars.length>0&&item.subNavbars[0].subNavbars[0].path&&item.subNavbars[0].subNavbars[0].url){ //三级
                    this.jump(item.subNavbars[0].subNavbars[0].path,item.subNavbars[0].subNavbars[0].url,item.id,item.subNavbars[0].subNavbars[0].id)
                }
            },
            jump(path,url,pid,id){ //路由地址、请求路径、父id（若点击的是跟导航，代表自身id）、自身id
                // console.log(pid)
                this.$router.replace({ path: path, query: { url: url,pid:pid,id:id }})
            }
        }
    }
</script>

<style scoped>
 .public-header{
        position: relative;
        z-index: 99;
        height: 80px;
        width: 100%;
    }
    .public-logo{
        position: absolute;
        left:30px;
        top:20px;
        height: 55px;
        width:auto;
        
    }
    .public-logo img{
        height: 55px;
        width:auto;
    }
    .public-nav{
        width:1000px;
        float: right;
        position: relative;
    }
    .public-nav .nav-title{
        display: block;
        height: 48px;
        padding:0px 10px;
        line-height: 48px;
        margin:20px  25px 0 25px;
        text-align: center;
        font-size: 16px;
        color:#000;
        float:left;
        position: relative;
        cursor: pointer;
    }
    .public-nav .nav-title div{
        display: none;
        width: 100px;
        position: absolute;
        padding: 0;
        left:0;
    }
    .public-nav .nav-title ul{
        background: rgba(255,255,255,0.3);
    }
    .public-nav .nav-title ul li{
        list-style: none;
        width: 75px;
        height: 25px;
        font-size: 14px;
        line-height: 25px;
        margin: 15px 10px;
        text-align: left;
    }
    .public-nav .nav-title ul li a{
        color:#000;
    }
    .public-nav .nav-title ul li a:hover{color:red;text-decoration: none;}
    .public-nav .nav-title.active{
        color:red;text-decoration: none;
        border-bottom: 5px solid red;
    }
    .public-nav .nav-title:hover{
        text-decoration: none;
        color: red;
        border-bottom: 5px solid red;
    }
</style>